<template>
<!-- 交易价差T检验报告 -->
    <div class="fund-list">
        <content-layout>
            <el-form label-width="90px" label-position="right" slot="searchSlot">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="选择组合：">
                            <el-input
                                placeholder="选择组合"
                                prefix-icon="el-icon-search"
                                v-model="searchForm.pFundList" 
                                @focus="focusSelect"
                                size="mini"
                                style="width: 82%"
                            >
                            </el-input>   
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="交易日历：">
                            <el-select v-model="searchForm.pCalendar" size="mini">
                                <el-option value="CHINA_EX" label="交易所日历"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="视图类型：">
                            <el-select v-model="searchForm.pViewType" size="mini" disabled>
                                <el-option value="0" label="html"></el-option>
                                <el-option value="1" label="其他"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                </el-row> 
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="时间频率：">
                            <el-select v-model="searchForm.pTime" size="mini" disabled>
                                <el-option value="时间段" label="时间段"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开始日期：">
                            <el-date-picker
                                v-model="searchForm.pBegDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyyMMdd"
                                size="mini">
                            </el-date-picker>  
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束日期：">
                            <el-date-picker
                                v-model="searchForm.pEndDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyyMMdd"
                                size="mini">
                            </el-date-picker>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" label="">
                        <el-button type="primary" @click="openSettingDialog">查询</el-button>
                        <el-button @click="exportFile">导出</el-button>
                    </el-col>
                </el-row>    
            </el-form>
            <h2 slot="titleSlot">同向交易价差T检验</h2>
            <template v-if="tableIs">
                <el-table 
                    :data="tableData.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)" 
                    border 
                    size="mini" 
                    style="width: 100%" 
                    slot="tableSlot"
                    row-key="id"
                    :header-cell-style="{'text-align':'center', background:'#e8f3ff'}"
                    v-if="tableDataIs"
                    :key="tableKey1"
                    :cell-style="cellStyle"
                    v-loading="tableLoading"
                    stripe
                >
                    <el-table-column prop="fundCode" label="组合代码" width="140px"> </el-table-column>
                    <el-table-column prop="fundName" label="组合名称" show-overflow-tooltip width="220px"> </el-table-column>
                    <el-table-column prop="comFundCode" label="对比组合代码" show-overflow-tooltip width="160px"> </el-table-column>
                    <el-table-column prop="comFundName" label="对比组合" show-overflow-tooltip width="220px"> </el-table-column>
                    <el-table-column prop="tType" label="委托方向" show-overflow-tooltip width="140px"> </el-table-column>
                    <el-table-column prop="avgPdr" label="溢价率均值" show-overflow-tooltip align="right" min-width="140px">
                        <template slot-scope="scope">
                            <span>{{scope.row.avgPdr?Number(scope.row.avgPdr*100).toFixed(4) + '%':''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stdPdr" label="溢价率标准差" show-overflow-tooltip align="right" min-width="180px">
                        <template slot-scope="scope">
                            <span>{{scope.row.stdPdr?scope.row.stdPdr.toFixed(4):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="t" label="T检验值" show-overflow-tooltip align="right" width="140px">
                        <template slot-scope="scope">
                            <span>{{scope.row.t?scope.row.t.toFixed(4):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="df" label="自由度" show-overflow-tooltip align="right" width="140px"> </el-table-column>
                    <el-table-column prop="tLimit" label="T临界值" show-overflow-tooltip align="right" width="140px">
                        <template slot-scope="scope">
                            <span>{{scope.row.tLimit?scope.row.tLimit.toFixed(4):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pValue" label="P-VALUE" show-overflow-tooltip align="right" width="140px">
                        <template slot-scope="scope">
                            <span>{{scope.row.pValue?scope.row.pValue.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tTestResult" label="是否通过" show-overflow-tooltip align="center" width="140px"> </el-table-column>
                    <el-table-column label="溢价率" show-overflow-tooltip align="center">
                        <el-table-column prop="equalZ" label="=0次数" show-overflow-tooltip align="right" width="140px"> </el-table-column>
                        <el-table-column prop="greaterZ" label=">0次数" show-overflow-tooltip align="right" width="140px"> </el-table-column>
                        <el-table-column prop="lessZ" label="<0次数" show-overflow-tooltip align="right" width="140px"> </el-table-column>
                        <el-table-column prop="profitRate" label="交易占优比" show-overflow-tooltip align="right" min-width="150px">
                            <template slot-scope="scope">
                                <span>{{scope.row.profitRate?Number(scope.row.profitRate*100).toFixed(2) + '%':''}}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table 
                    :data="tableData2.slice((page2.currentPage-1)*page2.pageSize,page2.currentPage*page2.pageSize)" 
                    border 
                    size="mini" 
                    style="width: 100%" 
                    slot="tableSlot2"
                    :header-cell-style="{'text-align':'center'}"
                    v-if="tableData2Is"
                    :key="tableKey2"
                    stripe
                >
                    <el-table-column prop="stockCode" label="证券代码" width="140px"> </el-table-column>
                    <el-table-column prop="stockName" label="证券名称" show-overflow-tooltip width="140px"> </el-table-column>
                    <el-table-column prop="stockType" label="证券类别" show-overflow-tooltip width="140px"> </el-table-column>
                    <el-table-column prop="twDates" label="实际时间段" show-overflow-tooltip align="center" width="250px"> </el-table-column>
                    <el-table-column prop="fundCode" label="组合代码" show-overflow-tooltip width="140px"> </el-table-column>
                    <el-table-column prop="fundName" label="组合名称" show-overflow-tooltip min-width="220px"> </el-table-column>
                    <el-table-column prop="comFundCode" label="对比组合代码" show-overflow-tooltip width="160px"> </el-table-column>
                    <el-table-column prop="comFundName" label="对比组合" show-overflow-tooltip min-width="220px"> </el-table-column>
                    <el-table-column prop="tType" label="委托方向" show-overflow-tooltip width="140px"> </el-table-column>
                    <el-table-column prop="tPrice" label="成交均价" show-overflow-tooltip align="right" width="140px">
                        <template slot-scope="scope">
                            <span>{{scope.row.tPrice?scope.row.tPrice.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="comTPrice" label="对比组合成交均价" show-overflow-tooltip align="right" width="180px">
                        <template slot-scope="scope">
                            <span>{{scope.row.comTPrice?scope.row.comTPrice.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tAmount" label="组合成交数量" show-overflow-tooltip align="right" min-width="160px">
                        <template slot-scope="scope">
                            <span>{{scope.row.tAmount?scope.row.tAmount.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tBalance" label="组合成交金额" show-overflow-tooltip align="right" min-width="160px">
                        <template slot-scope="scope">
                            <span>{{scope.row.tBalance?scope.row.tBalance.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="priceDiffRate" label="溢价率" show-overflow-tooltip align="right" width="140px">
                        <template slot-scope="scope">
                            <span>{{scope.row.priceDiffRate?Number(scope.row.priceDiffRate*100).toFixed(2) + '%' : ''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rzrqFlag" label="是否包含融资融券交易" show-overflow-tooltip align="center" width="160px"> </el-table-column>
                    <el-table-column prop="counterparty" label="组合交易对手" show-overflow-tooltip align="center" width="160px"> </el-table-column>
                    <el-table-column prop="comCounterparty" label="对比组合交易对手" show-overflow-tooltip align="center" width="160px"> </el-table-column>
                </el-table>
                <el-table 
                    :data="tableData3" 
                    border 
                    size="mini" 
                    style="width: 50%; margin-bottom: 15px" 
                    height="15vh" 
                    slot="tableSlot3"
                    :header-cell-style="{'text-align':'center'}"
                    v-if="tableData3Is"
                    stripe
                >
                    <el-table-column prop="pSamplelen" label="时间窗口" align="center"> </el-table-column>
                    <el-table-column prop="checkCount" label="两两匹配的组合总数" show-overflow-tooltip align="center"> </el-table-column>
                    <el-table-column prop="passRate" label="通过率" show-overflow-tooltip align="right"> </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.currentPage"
                    :page-sizes="[5, 7, 10, 20, 25, 50]"
                    :page-size="page.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="page.total"
                    slot="paginationSlot"
                >
                </el-pagination>    
            </template>
        </content-layout>
        <!-- 模型参数设置弹窗 -->
        <el-dialog
            title="模型参数设置"
            :visible.sync="dialogVisible"
            width="450px"
            top="5vh"
            :before-close="handleClose"
            :close-on-click-modal='false'
        >
            <div>
                <el-form ref="form" :model="searchForm" label-width="160px">
                    <el-form-item label="时间窗长：">
                        <el-input-number v-model="searchForm.pSamplelen" size="mini" style="width: 223px" type="number" controls-position="right" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="T检验置信度：">
                        <el-input v-model="searchForm.pConfidence" size="mini" style="width: 223px"></el-input>
                    </el-form-item>
                    <el-form-item label="T检验样本数：">
                        <el-input-number v-model="searchForm.pSample" size="mini" style="width: 223px" type="number" controls-position="right" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="是否区分交易方向：">
                        <el-select v-model="searchForm.pDirection" size="mini" placeholder="">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否滚动日期：">
                        <el-select v-model="searchForm.pRollingdate" size="mini" placeholder="">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="组合比较模式：">
                        <el-select v-model="searchForm.pBilateral" size="mini" placeholder="">
                            <el-option label="单边" value="0"></el-option>
                            <el-option label="双边" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="溢价率算法：">
                        <el-select v-model="searchForm.pPrflag" size="mini" placeholder="">
                            <el-option label="较小量" value="1"></el-option>
                            <el-option label="标准" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="占优比筛选：">
                        <el-select v-model="searchForm.pValueType" size="mini" placeholder="">
                            <el-option label="区间外" value="0"></el-option>
                            <el-option label="区间内" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="交易占优比上限：">
                        <el-input v-model="searchForm.pHighvalue" size="mini" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="交易占优比下限：">
                        <el-input v-model="searchForm.pLowervalue" size="mini" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="是否通过检验：">
                        <el-select v-model="searchForm.pCheckflag" size="mini" placeholder="">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                            <el-option label="不过滤" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="溢价率阈值：">
                        <el-input v-model="searchForm.pPrpreshold" size="mini" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="资产范围：" size="mini">
                        <el-select v-model="searchForm.pAtypeList" placeholder="" multiple>
                            <el-option label="股票" value="STD_S"></el-option>
                            <el-option label="债券" value="STD_BD"></el-option>
                            <el-option label="基金" value="STD_FD"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkContent">确 定</el-button>
            </span>
        </el-dialog>
        <FundDialog 
            :fundVisible='fundVisible'
            @emitCheckGroup="emitCheckGroup"
        ></FundDialog>
    </div>
</template>

<script lang="ts">
import { downLoadFile } from '@/utils/request';
import { Component, Vue } from 'vue-property-decorator';
import RiskPagination from '@/common/components/risk-pagination.vue';
import ContentLayout from '../commom/content-layout.vue';
import FundDialog from '../commom/fund-dialog.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'TradeSpread',
    components: {
        RiskPagination,
        ContentLayout,
        FundDialog
    },
})
export default class TradeSpread extends Vue {
    private tableData: any[] = [];
    private tableData2: any[] = [];
    private tableData3: any[] = [];

    private page: pages = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };
    private page2: pages = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };

    // 查询条件
    searchForm: any = {
        pFundList: '', // 选择组合
        pCalendar: 'CHINA_EX', // 计算日历
        pTime: '时间段', // 时间频率
        pViewType: '0', // 视图类型
        pBegDate: '', // 开始日期
        pEndDate: '', // 结束日期
        pSamplelen: '3', // 时间窗长
        pConfidence: '0.95', // T检验置信度
        pSample: '30', // T检验样本数
        pDirection: '1', // 是否区分交易方向
        pRollingdate: '0', // 是否滚动日期
        pBilateral: '1', // 组合比较模式
        pPrflag: '1', // 溢价率算法
        pValueType: '1', // 占优比筛选
        pHighvalue: '0.95', // 交易占优比上限
        pLowervalue: '0.55', // 交易占优比下限
        pCheckflag: '2', // 是否通过检验
        pPrpreshold: '0.1', // 溢价率阈值
        pAtypeList: [], // 资产范围
    };

    // 修改行产品名称
    fundName: string = '';
    // 查询弹窗
    dialogVisible: boolean = false;
    tableIs: boolean = false;
    fundVisible: boolean = false;
    checkFundGroupItem = []; // 已选产品组
    checkFundItem = []; // 已选产品
    getRowKeys = '';
    firstTable = {
        remainder: 0, // 第一个表格最后数据在第几页
        amount: 0, // 第一个表格最后一页数据有几条
    }
    tableDataIs = true;
    tableData2Is = false;
    tableData3Is = false;
    tableKey1: number = -1;
    tableKey2: number = -1;
    tableLoading: boolean = false;
    async mounted() {
    }
    // 选择组合
    private focusSelect() {
        this.fundVisible = true;
    }
    // 点击查询按钮
    private openSettingDialog() {
        this.dialogVisible = true;
    }
    private handleClose() {
        this.dialogVisible = false;
    }
    // 点击查询按钮
    private checkContent() {
        if (this.searchForm.pFundList == '') {
            this.$message.warning('请填写【选择组合】的范围');
            return
        }
        if (this.searchForm.pBegDate == '') {
            this.$message.warning('请填写【开始日期】的范围');
            return
        }
        if (this.searchForm.pEndDate == '') {
            this.$message.warning('请填写【结束日期】的范围');
            return
        }
        this.tableLoading = true;
        this.dialogVisible = false;
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        searchForm.pFundList = searchForm.pFundList.split(',');
        searchForm.pAtypeList = searchForm.pAtypeList.join(',');
        this.$axios.post('/fairTrade/PriceDiff', searchForm)
        .then((res: any) => {
            this.tableData = [];
            this.tableData3 = []; 
            this.page.currentPage = 1;
            if (res.length != 0) {
                this.tableData = res;
                this.firstTable.remainder = res.length % 10 == 0 ? (res.length / 10) : (Math.floor(res.length / 10) + 1);
                this.firstTable.amount = res.length % 10;
                this.tableData3 = [{
                    pSamplelen: this.searchForm['pSamplelen'] + '日',
                    checkCount: res[0].checkCount,
                    passRate: Number(res[0].passRate * 100).toFixed(2) + '%'
                }];    
            }
            // this.dialogVisible = false;
            this.tableIs = true;
            this.$axios.post('/fairTrade/PriceDiffException', searchForm)
            .then((res: any) => {
                this.tableData2 = [];
                this.page2.currentPage = 1;
                this.tableData2 = res;
                this.tableLoading = false;
                let listLength = this.tableData.length + this.tableData2.length;
                this.page.total = listLength;
                this.tableDataIs = true;
                this.tableData2Is = false;
                this.tableData3Is = false;
                this.yh_message_success('查询成功！')
            })
        })
    }
    // 导出Excel
    exportFile() {
        if (this.tableData.length == 0) {
            this.$message.warning('数据为空！');
            return
        }
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        searchForm.pFundList = searchForm.pFundList.split(',');
        searchForm.pAtypeList = searchForm.pAtypeList.join(',')
        downLoadFile({
            url: '/fairTrade/exportPriceDiff',
            method: 'post',
            data: searchForm,
            loading: true,
            // loadingMsg: '正在准备导出，请稍后··· ···'
        });    
    }
    handleSizeChange(val) {
        this.page.pageSize = val;
    }
    // 翻页
    handleCurrentChange(val) {
        this.page.currentPage = val;
        if (val == this.firstTable.remainder) {
            this.page2.pageSize = 10 - this.firstTable.amount;
            this.page2.currentPage = 1;
            if (this.firstTable.amount == 0) {
                this.tableData2Is = false;
                this.tableDataIs = true;
            } else {
                this.tableData2Is = true;
                this.tableDataIs = true;  
            }
        } else if (val > this.firstTable.remainder) {
            this.page2.pageSize = 10;
            if (this.firstTable.amount == 0) {
                this.page2.currentPage = 1;
            } else {
                this.page2.currentPage = val - this.firstTable.remainder + 1;
            }
            this.tableData2Is = true;
            this.tableDataIs = false;
        } else if (val < this.firstTable.remainder) {
            this.page2.pageSize = 10;
            this.tableData2Is = false;
            this.tableDataIs = true;
            this.tableKey1++;
        }
        let currentPage = this.page.total % 10 == 0 ? this.page.total / 10 : (Math.floor(this.page.total / 10) + 1)
        if (val == currentPage) {
            this.tableData3Is = true;
        } else {
            this.tableData3Is = false;
        }
        // this.tableKey1++;
        // this.tableKey2++;
    }
    // 选择组合
    emitCheckGroup(param1, param2) {
        this.fundVisible = false;
        if (param2 == 'confirm') {
            this.searchForm.pFundList = [];
            let pFundList = []
            param1.forEach(item => {
                pFundList.push(item.fundCode);
            })    
            this.searchForm.pFundList = pFundList.join(',')
        }
    }
    cellStyle ({ row, column, rowIndex, columnIndex }) {
        if (row.tTestResult.indexOf('拒绝') != -1 && columnIndex == 11) {
            return 'color: red';
        } else if (row.tTestResult.indexOf('通过') != -1 && columnIndex == 11) {
            return 'color: green';
        } else {
            return ''
        }
    }
}
</script>
<style lang="scss" scoped>
.fund-list {
    height: 100%;
}
.el-col-6 {
  height: 50px;
}
/deep/ .el-form-item {
    margin-bottom: 0px;
}
/deep/ .el-form-item__label {
    color: #575757;
}
/deep/ .el-pagination .el-select .el-input .el-input__inner {
    background: white;
    border: 1px solid #e5e5ea;
}
</style>
